<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <!-- 顶部标题 -->
        <span class="shopname">新零售商户管理后台系统</span>
        <span class="tabs">
          <div style="margin-bottom: 20px;">
            <!-- <el-button size="small"
                       @click="addTab(editableTabsValue)"
                       class="addbtn">
            </el-button> -->
          </div>
          <el-tabs v-model="editableTabsValue"
                   type="card"
                   @tab-remove="removeTab"
                   @tab-click="tabRouter">
            <el-tab-pane v-for="(item) in editableTabs"
                         :key="item.name"
                         :label="item.title"
                         :name="item.name"
                         :closable="item.close">
            </el-tab-pane>
          </el-tabs>
        </span>
      </div>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside>
        <!-- 侧边栏菜单 -->
        <el-menu background-color="rgb(96,132,144)"
                 text-color="#fff"
                 active-text-color="rgb(233,186,70)"
                 unique-opened
                 :collapse-transition="false"
                 :collapse="isCollapse"
                 router>
          <!-- 一级菜单 -->
          <el-submenu :index="index+''"
                      v-for="(item, index) in menuList"
                      :key="index"
                      @click="addTab(item.title, item.path)">
            <!-- 一级菜单模板 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="item.icon"
                 class="icon"></i>
              <!-- 文本 -->
              <span ref="onemenu"
                    @click="menuRouter(item, index)"
                    class="onemenu">{{item.title}}</span>
            </template>
            <!-- 二级子菜单 -->
            <el-menu-item @click="addTab(subItem.title, subItem.path)"
                          :index="'/' + subItem.path"
                          v-for="(subItem, index) in item.children"
                          :key="index">
              <template slot="title">
                <!-- 文本 -->
                <span>{{subItem.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体结构 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        { title: '主页', path: 'welcome', icon: 'el-icon-s-home', onemenu: '1' },
        { title: '店铺管理', icon: 'el-icon-s-home', children: [{ title: '店铺列表', path: 'shoplist' }, { title: '商品列表', path: 'goodslist' }, { title: '开店审核', path: 'shopchecked' }, { title: '店铺权益设置', path: 'shopequity' }, { title: '店铺行业管理', path: 'shopindusty' }, { title: '商品类别管理', path: 'goodscategory' }] },
        { title: '商圈管理', icon: 'el-icon-office-building', children: [{ title: '共享商圈管理', path: 'shabusiness' }, { title: '个人商圈管理', path: 'perbusiness' }] },
        { title: '订单管理', icon: 'el-icon-suitcase-1', children: [{ title: '订单列表', path: 'orderlist' }, { title: '订单统计', path: 'orderstatistics' }] },
        { title: '优惠券管理', icon: 'el-icon-s-ticket', children: [{ title: '通用优惠券', path: 'comcoupon' }, { title: '店铺优惠券', path: 'shopcoupon' }] },
        { title: '推广列表', path: 'prolist', icon: 'el-icon-s-operation', onemenu: '1' },
        { title: '素材库管理', icon: 'el-icon-s-operation', children: [{ title: '官方素材库', path: 'govesource' }, { title: '素材审核', path: 'sourcecheck' }, { title: '用户素材管理', path: 'usersource' }] },
        { title: '财务管理', icon: 'el-icon-s-operation', children: [{ title: '提现管理', path: 'withdraw' }, { title: '平台收入明细', path: 'platincome' }, { title: '平台支出明细', path: 'platexpend' }] },
        { title: '系统设置', icon: 'el-icon-s-operation', children: [{ title: '账号管理', path: 'accountman' }, { title: '参数设置', path: 'parameter' }] }],
      editableTabsValue: '1',
      editableTabs: [{
        title: '主页',
        name: '1',
        content: 'welcome',
        close: false
      }],
      tabIndex: 1,
      isCollapse: false
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    addTab (targetName, targetPath) {
      // 声明变量 让this.tabIndex自增作为tab标签的唯一标识
      const newTabName = ++this.tabIndex + ''
      if (this.editableTabs.length === 3) {
        this.editableTabs.splice(this.editableTabs.length - 1, 1, {
          title: targetName,
          name: newTabName,
          content: targetPath,
          close: true
        })
      } else {
        this.editableTabs.push({
          title: targetName,
          name: newTabName,
          content: targetPath,
          close: true
        })
      }
      this.editableTabsValue = newTabName
    },
    removeTab (targetName) {
      // 一级标签，直接不执行以下代码
      if (targetName === '1') return
      console.log(targetName);
      const tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            // 删除的前一个标签或后一个标签为最后一级
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              console.log(nextTab);
              this.$router.push(nextTab.content)
              // 添加高亮
              activeName = nextTab.name
            }
          }
        })
      }
      this.editableTabsValue = activeName
      // 过滤器，重新渲染数组
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },
    tabRouter (item) {
      this.$router.push('/' + this.editableTabs[item.index].content)
    },
    menuRouter (item, index) {
      if (index !== 0) {
        this.addTab(item.title, item.content)
      }
      if (index === 5) {
        this.$router.push('/prolist')
      } else if (index === 0) {
        this.$router.push('/welcome')
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  height: 100%;
}
.el-header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  background: rgb(96, 132, 144);
  > div {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .shopname {
    margin-left: 10px;
    float: left;
    width: 220px;
    color: #fff;
    font-size: 18px;
  }
}
.el-aside {
  background: rgb(96, 132, 144);
  width: 220px !important;
}

.addbtn {
  display: none;
}

.el-menu {
  border-right: 0;
}
.icon {
  color: #fff;
  font-size: 18px;
  margin-right: 5px;
}
.onemenu {
  display: inline-block;
  height: 100%;
  width: 100%;
}
.el-menu-item {
  margin-left: 12px;
}
</style>
